<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login Form</title>
    <link rel="stylesheet" href="style.css">
    <!--vue前端js框架-->
    <script src="js/vue.js"></script>
    <!-- axios用来向后端发送请求-->
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div class="box" id="app">
        <form autocomplete="off">
            <h2>注册页面</h2>
            <div class="inputBox">
                <input type="text" required="required" v-model="user.username">
                <span>UserName</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="passWord" required="required" v-model="user.userpass">
                <span>Password</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="text" required="required" v-model="yzm">
                <span>验证码</span> 
                <i></i>
            </div>
            <img :src="img" alt="" width="96" height="37" @click="change" style="margin-left: 200px;"/>
            <input type="button" @click="regin()" value="注册"></input>
            <div>
                <h5>有账号? <a href="login.html" style="color: blue;">登录</a></h3>
                  
            </div>
        </form>

    </div>
</body>
</center>
<script>
    var app = new Vue({
        el: '#app',
        data: {//数据存储的地方
             yzm: "",
            img: "http://localhost:8082/db137/ZcYzmServlet",
            user: {
                username: "",
                userpass: ""
            },
           
        },
        methods: {//方法

            regin() {
                if(this.yzm==""){
                    alert("验证码不能为空")
                }else{
                        axios.get("http://localhost:8082/db137/reg",
                            { params: { username: this.user.username, userpass: this.user.userpass } },
                        ).then((result) => {//成功后的回调函数(获取后端接口返回的数据)
                            alert(result.data);
                            if (result.data == "注册成功") {
                                location.href = "login.html"
                            }

                        })
                    }
            }, change() {
                    this.img = "http://localhost:8082/db137/ZcYzmServlet?" + new Date().getTime();
            }
        }
    })
</script>
<!-- 这是写css代码的地方 css-> scoped 代表只能在本页面使用 -->
<style scoped>
    h5 {
        color: white;
    }
</style>
</body>

</html>